<template>
	<vCommonPage :type="1" title="智能导诊">
		<div slot="customContent" class="zndz" style="width: 100%">
			<div class="topTitle">
				请选择您的性别
			</div>
			<div class="flex zndzImg" >
				<img v-for="(item,index) in imgList" @click="clickImg(item,index)" :class="index==0?'manImg':'womanImg'" :src="item.src" />
			</div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	export default {
		name: "zndz",
		data() {
			return {
				imgList: [{
						src: require('../../assets/images/zndz/man.png') ,
						isClick: false
					},
					{
						src: require('../../assets/images/zndz/woman.png') ,
						isClick: false
					}
				]
			};
		},
		methods: {
			clickImg(item,index){
				if(index == 0){
					this.imgList= [{
							src: require('../../assets/images/zndz/man_click.png') ,
							isClick: false
						},
						{
							src: require('../../assets/images/zndz/woman.png') ,
							isClick: false
						}
					]
					setTimeout(()=>{
						//前往男性部位
						this.$router.push({
							name:'zndzJzbw',
							query:{
								sex: 1
							}
						})
					},100)
				}else if(index == 1){
					this.imgList= [{
							src: require('../../assets/images/zndz/man.png') ,
							isClick: false
						},
						{
							src: require('../../assets/images/zndz/woman_click.png') ,
							isClick: false
						}
					]
					setTimeout(()=>{
						//前往女性部位
						this.$router.push({
							name:'zndzJzbw',
							query:{
								sex: 2
							}
						})
					},100)
				}
				
			}
		},
		computed: {

		},
		components: {},
		mounted() {},
		created() {}
	};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
	

	@media  (min-height: 0px) and (max-height: 1910px) {
		.zndz{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			position: fixed;
			bottom: calc(50% - 10.3125rem);
		}
	 }
	  
	 @media  (min-height: 1919px)  {
		 .zndz{
		 	display: flex;
		 	flex-wrap: wrap;
		 	justify-content: center;
		 }
	
	 }
	 
	.topTitle {
		width: 100%;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		text-align: center;
		margin-top: 0px;
	}
	
	.zndzImg{
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.manImg {
		width: 229px;
		height: 232px;
		margin-rigth: 232px;
		margin-top: 150px;
	}

	.womanImg {
		width: 229px;
		height: 232px;
		margin-left: 161px;
		margin-top: 150px;
	}
</style>
